<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org" lang="">

<head>
    <meta charset="UTF-8">
    <base href="/">
    <title>搜索结果</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">


</head>
<body>
<div class="container-fluid">
    <!-- 头部-->
    <div class="row">
        <div class="col-md-5 col-md-offset-5">
            <form id="searchFrom" action="/search/searchByKeyWord">
                <input class="text-center" type="text" name="keyWord" />
                <input class="btn btn-default" type="submit" value="搜索">


            </form>
        </div>
    </div>

    <!-- 列表-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <tr>
                    <td>ID</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>卖点</td>
                    <td>图片</td>
                </tr>
                <tr th:each="product : ${pageInfo.list}">
                    <td th:utext="${product.id}"></td>
                    <td th:utext="${product.name}"></td>
                    <td th:utext="${product.price}"></td>
                    <td th:utext="${product.salePoint}"></td>
                    <td th:utext="${product.image}"></td>
                </tr>
            </table>
        </div>

        <!-- 信息-->
        <div class="col-md-6">
            当前第<span th:text="${pageInfo.pageNum}"></span>页、共<span th:text="${pageInfo.total}"></span>条记录，共<span th:text="${pageInfo.pages}"></span>页
        </div>

        <!-- 工具-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li th:each="num : ${pageInfo.navigatepageNums}" th:class="${num == pageInfo.pageNum ? 'active' : ''}">
                        <a th:href="@{'/search/searchByKeyWord?pageIndex='+${num} + '&pageSize=' + ${pageInfo.pageSize} + '&keyWord=' +${pageInfo.keyWord}}" th:text="${num}"></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>




</div>

<!--&lt;!&ndash; jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!--&lt;!&ndash; 最新的 Bootstrap 核心 JavaScript 文件 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->

</div>
</body>
</html>